<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseAvatar size="xs">
      <img src="/img/avatars/1.svg" shape="full" />
    </BaseAvatar>

    <BaseAvatar src="/img/avatars/5.svg" shape="full" />

    <BaseAvatar src="/img/avatars/4.svg" shape="full" size="md" />

    <BaseAvatar src="/img/avatars/3.svg" shape="full" size="lg" />

    <BaseAvatar src="/img/avatars/8.svg" shape="full" size="xl" />

    <BaseAvatar src="/img/avatars/16.svg" shape="full" size="2xl" />

    <BaseAvatar src="/img/avatars/2.svg" shape="full" size="3xl" />

    <BaseAvatar src="/img/avatars/20.svg" shape="full" size="4xl" />
  </div>
</template>
